<template>
  <div class="addForm">
    <el-dialog
      title="工单配置"
      :visible="dialogFormVisible"
      width="40%"
      @close="closeFn"
      @open="openFn"
    >
      <el-form
        ref="addForm"
        label-width="120px"
        :model="addForm"
        :rules="addFormRules"
      >
        <el-form-item label="设备编号" prop="innerCode">
          <el-input
            v-model="addForm.innerCode"
            type="text"
            placeholder="请输入内容"
            maxlength="15"
            show-word-limit
            style="width: 80%"
            @input="innerCodeChange"
          />
        </el-form-item>
        <el-form-item label="工单类型" prop="productType">
          <el-select
            v-model="addForm.productType"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option
              v-for="item in productTypeList"
              :key="item.typeId"
              :label="item.typeName"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isShow" label="补货数量">
          <el-link
            icon="el-icon-document"
            :underline="false"
            @click="details('addForm')"
          >补货清单</el-link>
        </el-form-item>
        <el-form-item label="运营人员" prop="assignorId">
          <el-select
            v-model="addForm.assignorId"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option
              v-for="item in userIdList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            v-model="addForm.desc"
            placeholder="请输入备注(不超过40字)"
            style="width: 80%"
            type="textarea"
            :rows="3"
            maxlength="40"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="closeFn">取 消</el-button>
        <el-button
          type="primary"
          class="sure"
          @click="dialogFormVisibleFn"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 补货清单弹出框 -->
    <div>
      <el-dialog
        title="补货详情"
        :visible="detailsDialog.detailsVisible"
        width="45%"
        @close="detailsDialog.detailsVisible = false"
      >
        <div style="height: 380px" class="scrollbar">
          <el-scrollbar style="height: 100%">
            <!-- 表格 -->
            <el-table
              :data="detailsDialog.list"
              style="width: 98%"
              :header-cell-style="{
                fontWeight: 'normal',
                background: '#f3f6fb',
              }"
            >
              <el-table-column label="货到编号" prop="channelCode" />
              <el-table-column label="商品名称" prop="sku.skuName" />
              <el-table-column label="当前数量" prop="currentCapacity" />
              <el-table-column label="还可添加" prop="maxCapacity" />
              <el-table-column label="补满数量" width="200">
                <template slot-scope="{ row }">
                  <el-input-number
                    v-if="row.sku !== null"
                    v-model="row.expectCapacity"
                    controls-position="right"
                    :min="row.min"
                    :max="row.max"
                    class="expectCapacity"
                  />
                  <p v-else>货道暂无商品</p>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            class="cancel"
            @click="detailsDialog.detailsVisible = false"
          >取 消</el-button>
          <el-button
            type="primary"
            class="sure"
            @click="detailsDialogFn"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// getchannelList
import {
  getoperatorList,
  getchannelList,
  PostCreate,
  taskInfo,
  taskType,
  gettaskDetails,
  getrepairerList
} from '@/api/task'
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    taskId: {
      type: String,
      default: () => {}
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      max: 20,
      userIdList: [], // 运营人员下拉数据
      addForm: {
        userId: 1,
        createType: 1,
        innerCode: '', // 设备编号
        productType: '', // 工单类型
        assignorId: '', // 运营人员
        desc: '', // 备注
        details: []
      },
      addFormRules: {
        innerCode: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 8, message: '请输入正确编号', trigger: 'blur' }
        ],
        productType: [{ required: true, message: '请输入', trigger: 'change' }],
        assignorId: [{ required: true, message: '请输入', trigger: 'change' }],
        desc: [{ required: true, message: '请输入', trigger: 'change' }]
      },
      productTypeList: [], // 工单类型下拉
      // details补货详情弹出框
      detailsDialog: {
        detailsVisible: false,
        expectCapacity: 1,
        list: [
          {
            createTime: '2021-01-31T19:50:50',
            updateTime: '2021-02-01T10:10:33',
            channelId: '4403',
            channelCode: '1-1',
            skuId: '1',
            price: 100,
            vmId: '77',
            innerCode: '01000062',
            maxCapacity: 10,
            currentCapacity: 0,
            lastSupplyTime: null,
            sku: {
              createTime: '2020-09-14T09:14:17',
              updateTime: '2020-09-14T09:14:19',
              skuId: '1',
              skuName: '可口可乐',
              skuImage: 'http://lkd2-java.itheima.net/image/product1.png',
              price: 150,
              classId: 1,
              discount: false,
              unit: '550ML',
              brandName: '可口可乐',
              skuClass: {
                classId: 1,
                className: '饮料',
                parentId: 0
              },
              capacity: null,
              realPrice: null
            }
          },
          {
            createTime: '2021-01-27T11:34:10',
            updateTime: '2021-01-30T17:16:11',
            channelId: '4103',
            channelCode: '1-1',
            skuId: '1',
            price: 100,
            vmId: '74',
            innerCode: '01000059',
            maxCapacity: 10,
            currentCapacity: 50,
            lastSupplyTime: '2021-01-30T16:32:47',
            sku: {
              createTime: '2020-09-14T09:14:17',
              updateTime: '2020-09-14T09:14:19',
              skuId: '1',
              skuName: '奶茶',
              skuImage: 'http://lkd2-java.itheima.net/image/product1.png',
              price: 150,
              classId: 1,
              discount: false,
              unit: '550ML',
              brandName: '可口可乐',
              skuClass: {
                classId: 1,
                className: '饮料',
                parentId: 0
              },
              capacity: null,
              realPrice: null
            }
          }
        ]
      }
    }
  },
  created() { this.taskType() },
  methods: {
    // 1.2.工单配置-工单类型下拉框
    async taskType() {
      const { data } = await taskType()
      this.productTypeList = data
    },
    // 1.点击补货清单校验-设备编号有没有填入
    // 所以只需要对表单进行部分的校验---
    details(formName) {
      this.$refs[formName].validateField('innerCode', async(isOk) => {
        if (isOk) {
          console.log('不通过')
        } else {
          // 3.补货详情--如果当前数量不是0则还可以添加最大值是0
          // --如果当前数量大于0则还可以添加就是10最大就是10
          const { data } = await getchannelList(this.addForm.innerCode)
          this.detailsDialog.list = data.map((item) => {
            this.$set(item, 'min', 0)
            this.$set(item, 'max', item.maxCapacity - item.currentCapacity)
            item.expectCapacity = item.maxCapacity - item.currentCapacity
            item.maxCapacity =
              item.maxCapacity - item.currentCapacity >= 0
                ? item.maxCapacity - item.currentCapacity
                : 0
            if (item.sku === null) {
              // item.sku = { skuName: '-' }
              item.currentCapacity = '-'
              item.expectCapacity = '货道暂无商品'
              item.maxCapacity = '-'
            }
            return item
          })
          this.detailsDialog.detailsVisible = true
          console.log('通过')
        }
      })
    },
    // 2.当设备编号有内容的时候拿到对应的编号去请求数据得到--运营人员的下来数据
    async innerCodeChange() {
      if (this.addForm.innerCode.trim().length <= 0) return
      if (!this.isShow) {
        const { data } = await getrepairerList(this.addForm.innerCode)
        this.userIdList = []
        this.userIdList = data
      } else {
        const { data } = await getoperatorList(this.addForm.innerCode)
        this.userIdList = []
        this.userIdList = data
      }
    },
    // 3.补货清单确定按钮如果点击确定需要把expectCapacity这些数据传递给后端
    detailsDialogFn() {
      this.addForm.details = []
      this.detailsDialog.list.forEach((item) => {
        // debugger
        if (item.sku !== null && item.expectCapacity > 0) {
          this.addForm.details.push({
            channelCode: item.channelCode,
            expectCapacity: item.expectCapacity,
            skuId: item.skuId,
            skuImage: item.sku.skuImage,
            skuName: item.sku.skuName
          })
          // console.log(this.addForm.details)
          // this.addForm.details.push(item)
          // console.log(this.addForm.details)
        }
      })
      // console.log(this.addForm.details)
      // debugger
      this.detailsDialog.detailsVisible = false
    },
    // 4.新增工单的确定按钮
    async dialogFormVisibleFn() {
      this.$refs.addForm.validate(async(isOk) => {
        if (isOk) {
          await PostCreate(this.addForm)
          this.$emit('sureFn')
        }
      })
    },
    closeFn() {
      this.addForm = {
        innerCode: '', // 设备编号
        productType: '', // 工单类型
        assignorId: '', // 运营人员
        desc: '' // 备注
      }
      this.$refs.addForm.resetFields()
      this.$emit('closeFn')
    },
    // 因为新增工单和查看详情取消的的重新创建公用一个弹出层
    // 让一个taskId做标记有taskId代表点击的查看详情需要做一个数据的回写
    async openFn() {
      if (this.taskId) {
        console.log('我是查看详情弹出层')
        const { data } = await taskInfo(this.taskId)
        this.addForm.innerCode = data.innerCode
        this.addForm.productType = data.productTypeId
        this.addForm.assignorId = data.assignorId
        this.addForm.desc = data.desc
        this.innerCodeChange()
        const res = await gettaskDetails(this.taskId)
        this.addForm.details = []
        this.addForm.details = res.data
      }
      if (!this.isShow) {
        console.log('我是运维工单弹出层')
      }
    }
  }
}
</script>

<style lang="scss" scope>
.addForm {
  .scrollbar {
    .el-scrollbar {
      // display: flex;
      // justify-content: space-around;
      padding-bottom: 20px;
      padding-right: -5px;
    }
    .el-scrollbar__wrap {
      // 必要的
      overflow: scroll;
      overflow-x: hidden;
      margin-right: -80px;
      //width: 180%;  //隐藏侧边默认滚动条 （达不到效果可以自己试着微调） 如解决不了可尝试用 `margin-right -60px`
      height: 105%; //隐藏底部滚动条  （100%如果达不到效果可以试着用110%）
    }
  }
  .el-dialog {
    border-radius: 10px;
    .el-dialog__header .el-dialog__title {
      color: #333333;
      font-size: 16px;
      font-weight: bold;
    }
    .el-dialog__header {
      border-radius: 10px;
      background-color: #fff;
    }
    .el-icon-close:before {
      color: #909399;
    }
    .el-dialog__body {
      padding: 15px 20px;
    }
    .dialog-footer {
      padding: 0 20px 10px 20px;
      .cancel {
        background-color: #fbf4f0 !important;
        border: unset;
        padding-top: 10px;
        height: 36px;
        width: 80px !important;
      }
      .sure {
        background: linear-gradient(135deg, #ff9743, #ff5e20);
        border: unset;
        color: #fff;
        height: 36px;
        width: 80px !important;
      }
    }
    .el-input {
      .el-input__inner {
        height: 36px !important;
        &::placeholder {
          text-align: left;
        }
      }
    }
    .el-link.el-link--default {
      color: #5f84ff;
    }
  }
  .el-table {
    position: unset;
  }
  .expectCapacity .el-input .el-input__inner {
    height: 40px !important;
  }
  .el-table thead {
    color: #666666 !important;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0 !important;
  }
  .el-table--fit {
    margin-top: 10px;
  }
  .el-table td {
    padding: 5px;
  }
}
</style>
